<template>
  <div>
    <div class="flex items-center">
      <div v-for="(item, index) in getActions" :key="index">
        <ElTooltip
          v-if="has(item, 'tooltip')"
          effect="light"
          :hide-after="50"
          placement="bottom"
          ref="tooltipRef"
        >
          <template #content>
            <RenderTooltip :item="item" :index="tooltipRefIndex(item)" />
          </template>
          <RenderBtn :item="item" :index="index"></RenderBtn>
        </ElTooltip>

        <template v-else>
          <RenderBtn :item="item" :index="index"></RenderBtn>
        </template>
      </div>
    </div>
  </div>
</template>

<script lang="tsx" setup>
defineOptions({
  name: 'TableAction',
})
import { computed, ref, unref } from 'vue'
import type { ButtonOptions } from '@/types/propTypes'
import { has, isArray, isString } from 'lodash-es'
import type { JSX } from 'vue/jsx-runtime'
import { UploadImage } from '@/components/BasicForm/index'
import { ElMessageBox, ElButton, ElTooltip } from 'element-plus'
const props = defineProps({
  // 按钮列表
  actions: {
    type: Array as () => ButtonOptions[],
    default: () => [],
  },
})

const tooltipRef = ref<any>(null)
const getActions = computed(() => {
  let acleng = props.actions.filter((e) => (e.ifShow === undefined ? true : e.ifShow))
  return acleng
})

function tooltipRefIndex(item: ButtonOptions) {
  const toolArr = props.actions.filter((e) => has(e, 'tooltip'))
  let index = 0
  toolArr.forEach((e, i) => {
    if (e.label == item.label) {
      index = i
    }
  })

  return index
}
function clickTap(item: ButtonOptions | any) {
  if (item.btnType == 'messageBox') {
    ElMessageBox.confirm(item.messageContent, item.messageTitle || '提示', {
      confirmButtonText: item.confirmText,
      cancelButtonText: item.cancelText || '取消',
      type: item.messageType || 'warning',
    })
      .then(() => {
        item.confirm()
      })
      .catch(() => {
        if (has(item, 'cancel')) {
          item?.cancel()
        }
      })
  } else {
    if (has(item, 'onClick')) {
      item?.onClick()
    }
  }
}
const RenderTooltip = computed(() => ({ item, index }: { item: ButtonOptions; index: number }) => {
  let jsxData: JSX.Element = <></>
  if (has(item, 'tooltip')) {
    if (isString(item.tooltip)) {
      jsxData = <>{item.tooltip}</>
    }
    if (isArray(item.tooltip)) {
      let data = item.tooltip
      jsxData = (
        <div class="flex flex-col ">
          {data.map((e: ButtonOptions) => {
            const show = e.ifShow === undefined ? true : e.ifShow
            const showIcon = has(e, 'icon') && has(e, 'type')
            return (
              <>
                {show ? (
                  <div
                    class="flex items-center justify-start cursor-pointer"
                    onClick={() => {
                      tooltipRef.value[index].onClose()
                      clickTap(e)
                    }}
                  >
                    <ElButton
                      link
                      type={e.type || 'primary'}
                      class={['font-400 my-[8px]', e.class]}
                    >
                      {showIcon ? <icon-font class="mr-6px" icon={item.icon} size="16" /> : null}
                      {e.label}
                    </ElButton>
                  </div>
                ) : null}
              </>
            )
          })}
        </div>
      )
    }
  }
  return jsxData
})
// 按钮
function RenderBtn({ item, index }: { item: ButtonOptions; index: number }) {
  let show = item.ifShow === undefined ? true : item.ifShow
  // 前面图标
  function RenderFrontIcon() {
    let showIcon = item.icon && item.type
    return <>{showIcon ? <div>11</div> : null}</>
  }
  // 后面图标
  function RenderLatterIcon() {
    const showLatter = index + 1 != unref(getActions).length
    return <>{showLatter ? <div class="bg-[#EDF3FF] w-[2px] h-[20px] mx-[12px]"></div> : null}</>
  }
  // 按钮
  function RenderCenterBtn() {
    const { btnType } = item
    // 上传按钮
    const showUpload = btnType == 'upload'
    let componentProps = item.componentProps ? item.componentProps : {}

    return (
      <>
        {showUpload ? (
          <UploadImage {...componentProps}>
            {{
              uploadBtn: () => (
                <ElButton link type={item.type || 'primary'} class={['font-400', item.class]}>
                  {RenderFrontIcon()}
                  {item.label}
                </ElButton>
              ),
            }}
          </UploadImage>
        ) : (
          <ElButton link type={item.type || 'primary'} class={['font-400', item.class]}>
            {RenderFrontIcon()}
            {item.label}
          </ElButton>
        )}
      </>
    )
  }

  return (
    <div>
      {show ? (
        <div class="flex items-center justify-start cursor-pointer" onClick={() => clickTap(item)}>
          {RenderCenterBtn()}
          {RenderLatterIcon()}
        </div>
      ) : null}
    </div>
  )
}
</script>

<style lang="scss" scoped></style>
